<template>
  <el-menu
      :default-active="activeIndex2"
      mode="horizontal"
      @select="handleSelect"
      background-color=#1D76D9FF
      text-color="#fff"
      active-text-color="#ffd04b">

    <el-menu-item index="1" @click="">个人机构馆</el-menu-item>
    <el-menu-item index="2" @click="">个人中心</el-menu-item>

    <div class="loginRegsterBtn">
      <el-dropdown>
        <el-button size="mini" type="primary" @click="loginBtn">
          登录
          <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="loginBtn">立即登录</el-dropdown-item>
            <el-dropdown-item @click="registerBtn">注册</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>


  </el-menu>


</template>

<script>
import { ArrowDown } from '@element-plus/icons'
export default {
  name: "IndexNavBar",
  components: {
    ArrowDown,
  },

  data() {
    return {

    };
  },

  methods: {

    loginBtn() {
      const { href } = this.$router.resolve( {
        path: '/user/sign/login',
      })
      window.open(href,'_self')
    },

    registerBtn() {
      const { href } = this.$router.resolve( {
        path: '/user/sign/register',
      })
      window.open(href, "_self")
      console.log("press reg")
    }
  }
}
</script>

<style scoped>

  .loginRegsterBtn {
    float: right;
    margin-top: 13px;
    margin-right: 16px;
    background-color: transparent;
  }

</style>